import React, { Component } from 'react';
import axios from 'axios'
import { Form, Input, Button, Typography, Alert } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import 'antd/dist/antd.css'
import user from "./index.module.css"

const { Title } = Typography;
export default class index extends Component {
    state = {
        errors: null,
        xianshi: "none",
    }
    onFinish = (e) => {
        // initialValue=""
        const { username, password } = e
        axios.get("http://localhost:3001/api/user", {
            params: {
                username,
                password
            }
        }).then((req) => {
            const { msg, code,token } = req.data
            switch (code) {
                case 0:
                    this.setState({
                        xianshi: "block",
                        errors: msg
                    })
                    break;
                    case 1:
                        this.setState({
                            xianshi: "none"
                        })
                        localStorage.setItem("token", token);
                        this.props.history.push(`/home`)
                        break;
                case 2:
                    this.setState({
                        xianshi: "block",
                        errors: msg
                    })
                    break;
            }
        })
    }
    render() {
        const { usernames, passwords, errors, xianshi } = this.state
        return (
            <div className={user.user}>

                <Title className={user.header} >电商后台管理系统</Title>
                <Form  onFinish={this.onFinish}
                    name="normal_login"
                    className="login-form"
                    initialValues={
                        {
                        username:"",
                        password:"",
                        remember: true,
                    }}
                >
                    <Form.Item 
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: "请填写账号",
                            },
                        ]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: "请填写密码",
                            },
                        ]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="Password"
                        />
                    </Form.Item>
                    <Form.Item >
                        <Button className={user.header} type="primary" htmlType="submit" >
                            登录
                        </Button>

                    </Form.Item>
                    <Alert className="error" style={{ display: xianshi }} message={errors} type="error" />
                </Form>
            </div>
        );
    }
}
